<template>
  <div class="menu_container">
    <el-row type="flex" justify="center">
      <!-- 左边菜单栏开始 -->
      <el-col :span="3" class="left_menu">
        <el-menu default-active="1" class="el_menu_container" :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title">
              <span>青春文学</span>
            </template>
            <el-menu-item-group>
              <div slot="title" class="extend_container">
                <div class="flex_wrap">
                  <span>
                    <a href="#">影视写真</a>
                  </span>
                  <span>
                    <a href="#">穿越/重生/架空</a>
                  </span>
                  <span>
                    <a href="#">影视写真</a>
                  </span>
                </div>
              </div>
            </el-menu-item-group>
          </el-submenu>

          <!-- 第二列 -->
          <el-submenu index="2">
            <template slot="title">
              <span>休闲爱好</span>
            </template>
            <el-menu-item-group>
              <div slot="title" class="extend_container">
                <div class="flex_wrap">
                  <span>
                    <a href="#">影视写真</a>
                  </span>
                  <span>
                    <a href="#">穿越/重生/架空</a>
                  </span>
                  <span>
                    <a href="#">影视写真</a>
                  </span>
                </div>
              </div>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <!-- 左边菜单栏结束 -->
      <!-- 右边轮播图开始 -->
      <el-col :span="12" class="rigth_menu"></el-col>
    </el-row>
  </div>
</template>

<style type="text/css" lang="scss" scoped>
// 显示箭头
.menu_container >>> .el-submenu__title .el-submenu__icon-arrow {
  display: block;
}
// 显示隐藏span
.menu_container >>> .el-submenu__title span {
  height: 56px;
  width: 100%;
  visibility: visible;
}

.menu_container {
  margin-top: 50px;
}
// ===========================左侧菜单栏开始
.left_menu {
  // background-color: #666;
  height: 400px;
}
.el_menu_container {
  width: 100%;
  min-height: 400px;
}

// 调节菜单延申宽高
.el-menu-item-group {
  // background-color: rgb(235, 161, 161);
  width: 600px;
  height: 350px;
}

.extend_container span {
  font-size: 16px;
  padding: 4px 10px;
  border: 1px solid #e4e7ed;
  border-radius: 40px;
  margin: 10px 10px;
  // background-color: bisque;
}

// ============================左侧菜单栏结束

// ============================右侧轮播图开始
.rigth_menu {
  background-color: rgb(182, 103, 103);
  height: 400px;
}

// ==============================右侧轮播图结束
</style>
<script>
export default {
  name: 'Menu',
  data () {
    return {
      isCollapse: true
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
